<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Edit Profile</title>
        <%@ include file="include/metatag.jsp" %>
    </head>

    <body>
        <div class="container whitebg">
            <%@ include file="include/header.jsp" %>
            <div class="container">
                <div class="row">
                    <div class="span12">
                        *this page only appear after log in ** REMOVE THIS LINE **
                        <h3>Edit Profile</h3>
                        <div class="alert alert-success">
                            *Your profile has been saved ** SHOW THIS AFTER CLICKING SAVE BUTTON **
                        </div>
                        <form action="index.jsp" method="POST" class="form-horizontal well">
                            <div class="control-group">
                                <label class="control-label" for="inputName">Username*</label>
                                <div class="controls">
                                    <input type="text" id="inputUsername" placeholder="Username" disabled />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputName">E-mail address*</label>
                                <div class="controls">
                                    <input type="text" id="inputEmail" placeholder="E-mail address" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputName">Name*</label>
                                <div class="controls">
                                    <input type="text" id="inputName" placeholder="Name" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputName">Password*</label>
                                <div class="controls">
                                    <input type="password" id="inputPassword" placeholder="Password" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputName">Contacts*</label>
                                <div class="controls">
                                    <input type="text" id="inputContacts" placeholder="Contacts" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputName">Home Address</label>
                                <div class="controls">
                                    <input type="text" id="inputAddress" placeholder="Address" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputName">Postal</label>
                                <div class="controls">
                                    <input type="text" id="inputPostal" placeholder="Postal" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputName">Website</label>
                                <div class="controls">
                                    <input type="text" id="inputWebsite" placeholder="Website" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputName">Short Profile</label>
                                <div class="controls">
                                    <textarea id="inputShortProfile" placeholder="Short Profile" style="width:300px; height:150px;"></textarea>
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <%@ include file="include/footer.jsp" %>
        </div>
        <script>
            $('#inputEmail').focus();
        </script>
    </body>
</html>
